import styles from './index.less';

import React, { Component } from 'react'
import { Layout, Menu } from 'antd';
import BizIcon from '@/components/BizIcon'
import { formatMessage } from 'umi-plugin-locale';
import Link from 'umi/link';
import { withRouter } from 'react-router-dom';

const { Sider } = Layout;

class SiderMenu extends Component {

    state = {
    };

    render() {
        return (
            <>
                <Sider
                    width={this.props.siderWidth}
                    // collapsible
                    collapsed={this.props.collapsed}
                    onCollapse={this.props.onCollapse}
                    className={styles.sider}
                >
                    <Menu theme="dark"
                        selectedKeys={[this.props.history.location.pathname]}
                        defaultSelectedKeys={['1']}
                        mode="inline"
                    >
                        <Menu.Item key="/">
                            <Link to="/">
                                <BizIcon type="icon-preview" />
                                <span>{formatMessage({ id: 'menu.video' })}</span>
                            </Link>
                        </Menu.Item>
                        <Menu.Item key="/location">
                            <Link to="/location">
                                <BizIcon type="icon-location-2" />
                                <span>{formatMessage({ id: 'menu.location' })}</span>
                            </Link>
                        </Menu.Item>
                        {/* <Menu.Item key="/trace">
                            <Link to="/trace">
                                <BizIcon type="icon-trace" />
                                <span>{formatMessage({ id: 'menu.trace' })}</span>
                            </Link>
                        </Menu.Item>
                        <Menu.Item key="/playback">
                            <Link to="/playback">
                                <BizIcon type="icon-replay" />
                                <span>{formatMessage({ id: 'menu.playback' })}</span>
                            </Link>
                        </Menu.Item>
                        <Menu.Item key="/configuration">
                            <Link to="/configuration">
                                <BizIcon type="icon-setting" />
                                <span>{formatMessage({ id: 'menu.configuration' })}</span>
                            </Link>
                        </Menu.Item> */}
                    </Menu>
                </Sider>
            </>
        )
    }
}

export default withRouter(SiderMenu)